<template>
	<view class="">
		<view class="title_font" v-if="active==0">
			<text>经你签字确认后，本告知书将存入本处的公证档案作为你已经知悉本告知书所载明内容，并题意承担相应义务的证报。</text>
		</view>
		<view class="" style="padding-top: 30rpx;background-color: #fff;">
			<uni-steps :options="list1" :active="active" />
		</view>
		<view v-if="active==0" style="background-color:#fff;margin-bottom:210rpx;padding:20rpx">
			<rich-text :nodes="nodes1"></rich-text>
			<rich-text :nodes="nodes2"></rich-text>
			<rich-text :nodes="nodes3"></rich-text>
		</view>
		<view v-if="active==1" style="margin-bottom:300rpx;">
			<view class="contract_title">
				<view>
					<view style="margin-bottom:20rpx">合同名称：{{list.order_name}}</view>
					<view>合同编号：{{list.order_no}}</view>
				</view>
			</view>
			<view class="sign_title">
				签署合同
			</view>
			<view class="sign_contact">
				<view class="flex justify-between">
					<view>设备名称：</view>
					<view>{{list.goods_title}}</view>
				</view>
				<view class="flex justify-between">
					<view>套餐名称：</view>
					<view>{{list.setmeal_title}}</view>
				</view>
				<view class="flex justify-between">
					<view>设备数量:</view>
					<view>{{list.amount}}</view>
				</view>
				<view class="flex justify-between">
					<view>租期:</view>
					<view>{{list.term}}</view>
				</view>
				<view class="flex justify-between">
					<view>租金单价:</view>
					<view>{{list.lease_price}}</view>
				</view>
				<view class="flex justify-between">
					<view>总租金:</view>
					<view>{{list.rent_total}}</view>
				</view>
				<view class="flex justify-between">
					<view>已付预付租金 (已冻结) :</view>
					<view>{{list.foregift_deduct}}</view>
				</view>
				<view style="margin-bottom: 0rpx;" class="flex justify-between">
					<view>买断价:</view>
					<view>{{list.setmeal_price}}</view>
				</view>
			</view>
			<view class="toSign">
				<view v-if="list.sign_img==null||list.sign_img==''" class="sign_icon flex" @click="handleSign">
					<image mode="scaleToFill" src="/static/images/sign_name.png"
						style="width:30rpx;height:30rpx;margin-right:5rpx;margin-top:9rpx" />
					<view>点击跳转签署区</view>
				</view>
				<view v-else>
					<image mode="scaleToFill"
						style="height:300rpx;width:700rpx;transform: rotate(360deg);transition: all 1s; position:relative;left:0rpx;bottom:0rpx"
						:src="'https://img.tingxiangzu.com/'+list.sign_img" />
				</view>
			</view>
		</view>
		<view v-if="active==2">
			<view class="">
				<view class="finshed">
					<view class="finshed_icon">
						<image mode="widthFix" src="/static/images/finshed_icon.png" style="width:40%;margin-top:50rpx" />
						<view class="finshed_font">签约完成，公证处已受理</view>
					</view>
				</view>
			</view>
			<view class="finshed_tips" style="">
				<view class="finshed01">
					合同名称: 租赁服务协议
				</view>
				<view class="finshed01">
					合同编号：{{list.order_no}}
				</view>
				<view class="finshed02">
					您本次签署的合同，将由依法设立的公证处进行线上公证，公证完成后将向您的电子邮箱发送公证文件请注意及时查收。
				</view>
			</view>
		</view>
		<view class="demo-btn-container" style="position:fixed;bottom:0rpx">
			<view class="agree_bg">
				<view class="agreement flex">
					<radio-group v-if="active!=2" class="radio-group">
						<view class="flex align-center radio" @click="changeAgree">
							<radio color="#1677ff" :value="index" :checked="isAgree" />
						</view>
					</radio-group>
					<text class="agree-text" @click="handleAgree(1)">
						<text v-if="active==1"
							style="font-size:25rpx">本人已认真阅读并同意填写邮箱作为公证书、催收文件、债权信务文书送达地地，本人清楚，线上送达与线下送达具有等同的法律效力。</text>
						<text v-if="active==0" style="font-size:25rpx">我已点击阅读 <text class="agree_book"
								@click="handleAgree(1)">《公证告知书》</text>、<text class="agree_book"
								@click="handleAgree(2)">《公证中请表及谈话笔录》</text>和 <text class="agree_book"
								@click="handleAgree(3)">《租货服务协议》</text>，清楚并同意上述特别提示的全部内并保证所质供的证明材料全部属实，并明确提供虚伪或伪造证明材料的相关法律责任。</text>
					</text>
				</view>
			</view>
			<button :class="isAgree||active==2?'demo-btn':''" @click="change(active)"
				:disabled="!isAgree&&active!=2">{{active==0?'确认，进入下一步':active==1?'确认签署':'完成'}}</button>
		</view>
	</view>
</template>

<script>
	import {
		realPersonAuth1
	} from '@/api/authentication'
	import {getSignData,getSignImg,setSignImg} from '@/api/order'
	export default {
		data() {
			return {
				active: 0,
				list1: [{
					title: '同意须知'
				}, {
					title: '签署合同'
				}, {
					title: '公证成功'
				}],
				nodes1: '',
				nodes2: '',
				nodes3: '',
				list: {},
				showNumberSteps: true,
				orderId: '',
				certName: '',
				certNo: '',
				cardFront: '',
				cardBack: '',
				goodsId: '',
				isAgree: false,
			}
		},
		onLoad(options) {
			if(options.flag){
				this.active=1
			}
			this.orderId=options.orderId
			getSignData({orderId:'55800'}).then(res=>{
				this.nodes1=res.agreement1
				this.nodes2=res.agreement2
				this.nodes3=res.agreement3
				this.list=res
			})
		},
		methods: {
			downLoad(url) {
				uni.downloadFile({
					url: url,
					success: res => {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {}
						})
					}
				})
			},
			change(e) {
				console.log(e);
				if(e==1){
					let data={
						orderId:'55800'
					}
					getSignImg(data).then(res=>{
						
					})
				}else if(e==2){
					uni.navigateBack({
						url:'/pagesA/my/order/myorder/myorder'
					})
				}
				if (this.active < this.list1.length - 1) {
					this.active += 1
					this.isAgree = !this.isAgree
				}
			},
			changeAgree() {
				this.isAgree = !this.isAgree
			},
			handleAgree(e) {
				console.log(e);
				let id = e
				if (id == 1) {
					this.downLoad('https://img.tingxiangzu.com/gaozhishu.pdf')
				} else if (id == 2) {
					this.downLoad('https://img.tingxiangzu.com/tanhuabilu.pdf')
				} else {
					this.downLoad(this.contract_url)
				}
			},
			handleSign() {
				uni.showLoading({
					content: '跳转中',
				});
				var timer;
				var gapTime = 1000
				clearTimeout(timer);
				let args = arguments[0];
				timer = setTimeout(() => {
					let that = this
					let params = {
						certName: this.list.cert_name,
						certNo: this.list.cert_no,
						orderId: this.orderId,
						cardFront: this.list.card_front,
						cardBack: this.list.card_back,
						gooddsId:this.list.goods_id
					}
					console.log(params);
					realPersonAuth1(params).then(res => {
						uni.navigateToMiniProgram({
							appId: 'wx1cf2708c2de46337',
							path: '/pages/index/index',
							extraData: {
								requestObj: { // 必填，入参
									flowId: res.flowId, // 必填，认证流程Id
									type: 'REALNAME', // 必填，业务类型：实名 REALNAME
									env: 'prod' // 非必填，对接环境：线上 prod(默认）, 模拟 sml(用于对接调试阶段）
								},
								callbackObj: { // 非必填，回传数据：签署完成后会将此数据完整回传
									'from': 'notarization',
									'orderId':this.orderId
								}
							}
						})
					})
				}, gapTime);
			}
		}
	}
</script>

<style>
	.demo-steps-class {
		border-radius: 20rpx;
	}

	.steps {
		width: 95%;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
	}

	.contract_title {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.sign_title {
		padding: 20rpx 2rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.sign_contact {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.sign_contact view {
		margin-bottom: 12rpx;
	}

	.toSign {
		width: 95%;
		margin: 0 auto;
		background-color: #86b2f0d0;
		height: 150rpx;
		color: #1677ff;
		border-radius: 20rpx;
		position: relative;
		height: 300rpx;
	}

	.sign_icon {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -15rpx 0 0 -130rpx;
	}

	.is_agree {
		border: 1rpx solid transparent;
	}

	.no_agree {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 1rpx solid #e5e5e5;
	}

	.title_font {
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		font-size: 24rpx;
		background-color: #86b2f0d0;
		color: #1677ff;
	}

	.agree_bg {
		background-color: #fff;
	}

	.demo-btn-container {
		width: 90%;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.agree_book {
		color: #1677ff;
	}

	.demo-btn {
		border-radius: 20rpx;
		background-color: #1677ff;
		color: #fff;
	}

	.finshed {
		width: 100%;
		height: 500rpx;
		margin: 0 auto;
		background-color: #fff;
	}

	.finshed_icon {
		text-align: center;
	}

	.finshed_font {
		margin-top: 50rpx;
		margin-left: 20rpx;
		font-size: 33rpx;
		text-align: center;
		font-weight: bolder;
	}

	.finshed01 {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.finshed02 {
		font-size: 30rpx;
		color: #1677ff;
	}

	.finshed_tips {
		padding: 20rpx;
		width: 90%;
		margin: 0 auto;
		background-color: #86b2f0d0;
		border-radius: 20rpx;
	}
</style>